<template>
<vs-modal :show.sync="show" effect="fade" width="800px">
  <div class="modal-header" slot="modal-header">
    <h4 class="modal-title">{{$t('common.params')}}</h4>
  </div>  
  <div class="modal-body" slot="modal-body">
    <validator name="form">
      <form class="form-horizontal">
        <div class="form-group">
          <label class="col-sm-3 control-label">{{$t('auth.username')}}</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" v-model="chgpwd.verify.username" v-validate:username="{required: true}">
          </div>
        </div> 
        <div class="form-group">
          <label class="col-sm-3 control-label">{{$t('auth.password')}}</label>
          <div class="col-sm-8">
            <input type="password" class="form-control" v-model="chgpwd.verify.password" v-validate:password="{required: true}">
          </div>
        </div> 
        <div class="form-group">
          <label class="col-sm-3 control-label">{{$t('auth.newPassword')}}</label>
          <div class="col-sm-8">
            <input type="password" class="form-control" v-model="chgpwd.newPassword" v-validate:new-password="{strong: true}">
            <strong class="my-error text-danger" v-if="$form.newPassword.strong">{{$t('error.passwordNotStrong')}}</strong>
          </div>
        </div> 
        <div class="form-group">
          <label class="col-sm-3 control-label">{{$t('auth.reNewPassword')}}</label>
          <div class="col-sm-8">
            <input type="password" class="form-control" v-model="reNewPassword" v-validate:re-new-password="{strong: true}">
            <strong class="my-error text-danger" v-if="$form.reNewPassword.strong">{{$t('error.passwordNotStrong')}}</strong>
          </div>
        </div>         
      </form>  
    </validator>
  </div>
  <div class="modal-footer" slot="modal-footer">
    <button type="button" class="btn btn-default" @click.prevent="onQuit">{{$t('common.quit')}}</button>
    <button type="button" class="btn btn-primary" @click.prevent="onChangePassword">{{$t('auth.chgpwd')}}</button>
  </div>    
</vs-modal>
</template>

<script>
import ebus from 'libs/ebus.js'
import {http} from 'share/server/api.js'
import toast from 'libs/toast.js'
import {encryptPassword} from 'share/server/utils.js'
import {printObj} from 'libs/utils.js'

export default {
  data () {
    return {
      show: false,
      reNewPassword: '',
      chgpwd: {
        verify: {
          username: '',
          password: ''
        },
        newPassword: '' 
      }
    }
  },
  methods: {
    showChangePassword () {
      this.reNewPassword = ''
      this.chgpwd.verify.username = ''
      this.chgpwd.verify.password = ''
      this.chgpwd.newPassword = ''
      this.show = true
    },
    onQuit () {
      this.show = false
    },
    onChangePassword () {
      if (this.$form.invalid) {
        toast.w(this, this.$t('common.fail'), this.$t('error.params'))
        return
      }
      if (this.chgpwd.newPassword !== this.reNewPassword) {
        this.reNewPassword = ''
        toast.w(this, this.$t('common.fail'), this.$t('error.passwordNotSame'))
        return
      }
      let req = {
        verify: {
          username: this.chgpwd.verify.username,
          password: encryptPassword(this.chgpwd.verify.password)
        },
        newPassword: encryptPassword(this.chgpwd.newPassword)
      }
      http('/api/auth/changePassword', 'POST', req).then(function(res) {
        if (res && res.data && res.data.code === 0) {
          this.show = false
        } else {
          toast.code(this, res.data)
        }
      }.bind(this))
    }
  },
  ready () {
    ebus.on('show-change-password', this.showChangePassword)
  }
}
</script>

<style>
</style>